<!--
    二维码生成对应 API

-->
<template>
  <div class="container">

    <!--  面包屑导航 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
        <li class="breadcrumb-item"><a href="#">休闲娱乐</a></li>
        <li class="breadcrumb-item active" aria-current="page">文字转二维码</li>
      </ol>
    </nav>

    <!--  头部卡片  -->
    <div class="card border-primary ">
      <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
      <div class="card-header bg-info">文字转二维码</div>
      <div class="card-body ">
        <h5 class="card-title text-primary">将输入的文字转换成为二维码~</h5>
        <p class="card-text"></p>
        <button type="button" @click="getQRCode" class="btn btn-outline-success">点击转换</button>

        <div class="form-group mx-sm-3 mb-2 d-inline-block">
          <input type="text" v-model="data" class="form-control" id="inputPassword2" placeholder="输入要转换的内容">
        </div>

        <!--  旋转提示组件  -->
        <div class="spinner-border text-success ml-5" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>


    <img v-bind:src="url" class="img-fluid rounded mx-auto my-image" alt="Responsive image">


  </div>
</template>

<script>
  export default {
    name: 'QRCode',
    data() {
      return {
        data: "",
        url: ""
      }
    },
    methods: {
      async getQRCode() {
        this.$(".spinner-border").css("display", "inline-block");

        const data = this.data;
        console.log(data);
        const result = await this.$http.get("http://hn216.api.yesapi.cn/?s=Ext.QrCode.Png&app_key=F8464B49D9036F3477747B3C17B26690&data=" + data);
        console.log(result);
        this.url = result.request.responseURL;

        if (this.url !== "") {
          this.$(".spinner-border").css("display", "none");
          this.$(".my-image").css("display", "block");
        }

      }
    }
  }
</script>

<style scoped>

  .spinner-border {
    display: none;
  }


  .my-image {
    display: none;
    max-width: 300px;
    width: 300px;
  }

</style>
